<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
    <title>上传作品</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/my.css">
    <link rel="stylesheet" href="../css/demo.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/public.js"></script>
    <script src="../js/exif.js"></script>
	<script src="../js/hammer.js"></script>
	<script src="../js/iscroll-zoom.js"></script>
	<script src="../js/lrz.all.bundle.js"></script>
	<script src="../js/jquery.photoClip.js"></script>
    <style>
        body{
            background: #f9f9f9;
            width: 100%;
    		overflow: hidden;
        }
        .upload_box {
            width: 100%;
            /* margin: 1em auto; */
        }
        .Publish_goods textarea{
            font-size: 14px;
        }
        .upload_drag_area {
            display: inline-block;
            width: 60%;
            padding: 4em 0;
            margin-left: .5em;
            border: 1px dashed #ddd;
            background: #fff url(drag.png) no-repeat 20px center;
            color: #999;
            text-align: center;
            vertical-align: middle;
        }
        .upload_drag_hover {
            border-color: #069;
            box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
            color: #333;
        }
        .upload_preview {
            background-color: #fff;
            overflow: hidden;
            _zoom: 1;
            float: left;
        }
        .upload_append_list {
            /* height: 300px; */
            margin-right: 8px;
            width: 60px;
            height: 60px;
            float: left;
            position: relative;
        }
        .upload_devare {
            margin-left: 2em;
            background: url('../img/删除@2x.png') no-repeat center;
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: contain;
        }
        .upload_submit_btn {
            display: none;
            height: 32px;
            font-size: 14px;
        }
        .upload_loading {
            height: 250px;
            background: url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;
        }
        .upload_progress {
            display: none;
            padding: 5px;
            border-radius: 10px;
            color: #fff;
            background-color: rgba(0, 0, 0, .6);
            position: absolute;
            left: 25px;
            top: 45px;
        }
        .upimg{
            width: 60px;
            height: 60px;
        }
        #body{
            margin-top: -6px;
            border-bottom: solid 1px #ddd;
        }
        #clipArea{
        	position: fixed;
        	left: 0;
        	top: 0;
        	width: 100%;
        	height: 100%;
        	display: none;
        }
        #clipBtn{
        	position: absolute;
        	right: 0;
        	bottom: 0;
        	width: 150px;
        	height: 40px;
        	font-size: 14px;
        	line-height: 40px;
        	text-align: center;
        	background: #5F3104;
        	border-radius: 9px;
        	color: #FFF;
        	z-index: 100;
        }
    </style>
</head>
<body>
	<div class="Publish_goods bc-gray" style="margin-top: 8px;">
	    <textarea name="" id="txt_intro" style="border: none;padding: 0 12px;box-sizing: border-box;" cols="30" rows="10" placeholder="我的作品描述(至少十个字)......" v-model="datas"></textarea>
	    <div id="body" class="light">
	        <div id="content" class="show">
	            <div class="demo">
	                <div class="upload_box">
	                    <div class="upload_main">
	                        <div id="preview" class="upload_preview">
	                        	<div class="upload_choose" style="float: left;position: relative;">
		                            <img src="../img/addcopy@2x.png" alt="" style='width:60px;height:60px;display: block;' id="add_img" >
		                            <input id="fileImage" type="file"  style="width: 60px;height: 60px;position: absolute;top: 0;opacity: 0;"/>
		                        </div>
	                        </div>
	                        
	                    </div>
	                    <div class="upload_submit">
	                        <button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	    <!--<p class="tip flex" style="position: relative;">
	        <span style="font-size: 14px;">鉴定证书</span>
	        <span id="issc" style="position: absolute;right: 50px;font-size: 14px;">未上传</span>
	        <img src="../img/报表@2x.png"  style="position: absolute;right: 10px;top: 10px;">
	        <input type="file" onchange="selectFileImage2(this)" style="opacity: 0.1;right: 10px;width: 25px;position: absolute;top: 8px;">
	    </p>-->
	    <p class="p2" style="font-size: 14px;">
	        <span style="color: #121212;opacity: 0.25">下一步即表示同意</span><span onclick="clickXy()">《紫陶汇竞拍服务协议》</span>
	    </p>
	    <section class="button flex">
	        <span class="left" style="font-size: 14px;" onclick="truePost()">存为草稿</span>
	        <span class="right" id="nextClick" style="font-size: 14px;">下一步</span>
	    </section>
	</div>
	<div id="clipArea">
		<div id="clipBtn">确认裁剪并上传</div>
	</div>
</body>
<script>
    var zhengshu = '';
    var imgss = '';
    var ids = GetQueryString("id");
    var production_id = GetQueryString("production_id");
    sessionStorage.removeItem('keywords');
    $(function () {
        if(!isNull(production_id)){
            $.ajax({
            	type: 'POST',
                url:base_url+"ZITAOHUI/getProductionDetails",//查询详情的接口
                data:JSON.stringify({
                    production_id:production_id
                }),
                contentType: "application/json;charset=UTF-8;",
                dataType:"json",
                success:function (data){
                	console.log(data);
		            var _d = data.extend.data.production_slideshow;
		            $("#txt_intro").val(data.extend.data.production_presentation);
		            for(var i = 0;i < _d.length;i++){
		                $(".upload_preview").append('<div class="img-div" style="float: left;position: relative;margin-right: 10px;"><img class= "upimg" imgurl="' + _d[i].production_img_url + '" src=' + _d[i].production_img_url + '><img src="../img/del@2x.png" onclick="delImg(this)" style="width: 12px;position: absolute;top: 2px;right: 0;"></div>');
		            }
		            if(_d.length==9){
		            	$('.upload_choose').hide();
		            }
                },
                error:function (){
                }
            })
        }else{
        	console.log('添加页面')
        }
        $("#nextClick").click(function (){//点击右侧的下一步
            if(isNull($("#txt_intro").val())){
                alert("请填写您的作品描述");
                return false;
            }
            var $len = $("#preview .img-div").length;
            if($len == 0){
                alert("请至少上传一张图片");
                return false;
            }
            var keywords = $("#txt_intro").val();
            var imgs = '';
            sessionStorage.keywords = keywords;//把产品的描述存在sessionStorage中，然后Publish_goods_next.html中获取
            for(var i = 0;i< $(".upimg").length;i++){
                imgs+=","+$(".upimg").eq(i).attr("imgurl");
            }
            imgs = imgs.replace(/,/,'');
            imgss = imgs;
            if(isNull(ids)){
                window.location.href = "my_Publish_goods_next.html"+"?imgs="+imgs+"&zsurl="+zhengshu;
            }else{
                window.location.href = "my_Publish_goods_next.html"+"?imgs="+imgs+"&zsurl="+zhengshu+"&ids="+ids+"&pids="+pids;
            }

        });
    });
    var $par = $('#preview');
    var clipArea = new bjj.PhotoClip("#clipArea", {//图片上传裁剪插件！
		size: [400, 400],
		outputSize: [800, 800],
		file: "#fileImage",
		view: "#view",
		ok: "#clipBtn",
		loadStart: function() {
			////console.log("照片读取中");
		},
		loadComplete: function() {
			////console.log("照片读取完成");
			$('#clipArea').show();
		},
		clipFinish: function(base64) {
			////console.log(base64);
			var newsIndex = base64.indexOf(",");
            var news = base64.substr(parseInt(newsIndex + 1));
            $.ajax({ //上传头像
                type: "post",
                url: base_url+"ZITAOHUI/upload/image",
                data:{
                    imageData:news
                },
                beforeSend:function(){
                	$('#clipBtn').text('上传中……');
                },
                dataType: "json",
                success: function (data) {
                    if (data.code == 1) {
                        //console.log("上传成功");
                        $('#clipArea').hide();
                        $('#clipBtn').text('确认裁剪并上传');
                        var _url = data.extend.msg.fileUrl;
                        $('.upload_choose').before('<div class="img-div" style="float: left;position: relative;margin-right: 10px;"><img class= "upimg" imgurl="' + _url + '" src=' + base64 + '><img src="../img/del@2x.png" onclick="delImg(this)" style="width: 12px;position: absolute;top: 2px;right: 0;"></div>');
                    	if($('.img-div').length==9){//上传了三张以后，把添加图片的按钮删除
                    		$('.upload_choose').hide();
                    	}
                    } else{
                        alert("上传失败");
                    }
                },
                error: function (error) {

                }
            })
		}
	});

    function delImg (obj){//点击图片右上角执行的函数
        $(obj).parent().remove();
        $('.upload_choose').show();
    }
    function truePost (){//存为草稿箱点击事件
        var imgs = '';
        for(var i = 0;i< $(".upimg").length;i++){
            imgs+=","+$(".upimg").eq(i).attr("imgurl");
        }
        imgs = imgs.replace(/,/,'');
        imgss = imgs;
        var keywords = $("#txt_intro").val();
        keywords = keywords.replace(/ /,'');
        if(keywords.length <= 0){
            alert("物品描述至少十个字");
            return false;
        }
        $.ajax({
            url:base_url+"ZITAOHUI/createProduction",
            data:JSON.stringify({
            	production_slideshow:encodeURI(imgss),
				production_presentation:keywords,//作品描述，
				production_status:"0",//(状态0:草稿箱,1:审核中,2:展示中,3:审核失败)
				store_id:sessionStorage.getItem('s_id')
            }),
            type:"POST",
            dataType:"json",
            contentType: "application/json;charset=UTF-8;",
            success:function (data){
                if(data.code == 1){
                    alert("保存成功");
                    window.location.replace("./my_Lot-management.html");
                }else{
                    alert("保存失败");
                }
            },
            error:function (error){
            }
        })
    }
    function clickXy(){//服务协议
        window.location.href = "zthxy.html";
    }
</script>
</html>